<template>
  <div>
    <div class="blank"></div>
    <header class="header">

      <div class="mgl-4">
        <slot name="left"></slot>
      </div>


      <span class="header_title">
        <span class="header_title_text">{{title}}</span>
      </span>

      <slot name="right"></slot>

    </header>
  </div>

</template>

<script>
  export default {
    props: {
      title: String
    },
  }

</script>

<style>
  .header {
    background: linear-gradient(-90deg, #ff6c59 0%, #ff9859 100%);
    position: fixed;
    z-index: 100;
    left: 0;
    top: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    color: #fff;
    text-align: center;
  }

  .header_title_text {
    font-size: 18px;
    color: #fff;
    display: block;
  }

  .blank {
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    position: fixed;
    background: linear-gradient(-90deg, #ff6c59 0%, #ff9859 100%);
    height: 10px;
  }

  .mgl-4{
    margin-left: 4px;
  }

</style>
